<!DOCTYPE html>
<extend name="Base/base" />
<block name='head'>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/Public/Index/css/plan/plan_details.css" media="screen" type="text/css" />
    <link href="/Public/Index/css/main.css" rel="stylesheet" /> 
    <link rel="stylesheet" type="text/css" href="/Public/Index/css/plan_css.css">
    <!-- 点击单独显示图片，手势放大、缩小css、js-->
    <link href="/Public/static/photoSwipe/photoswipe.css" rel="stylesheet" /> 
    <link href="/Public/static/photoSwipe/default-skin/default-skin.css" rel="stylesheet" />
    <script src="/Public/static/photoSwipe/photoswipe.min.js"></script>
    <script src="/Public/static/photoSwipe/photoswipe-ui-default.js"></script>
    <style>
        table{
            width:100%;
            border-collapse: collapse;
            margin:1rem auto;
            /*margin-top: 1rem;*/
        }
        table tr td{
            border:1px solid #CFDDEA;
            padding:0.3em 0;
            text-align: center;
        }
        table .value{
            width:80%;
            text-align: left;
            padding-left:10px;
        }
        table .key{
            width:20%;
            text-align: center;
            background: #F0F3F7;
            color:#5077AA;
        }
        .location{ color:#777; font-size: 0.7rem; width:75%;}
        table{background:#fff}
        .button{margin-top:2em}
        .plan-more tr{line-height: 2em}
        .adrme {margin-top:10px;}
    </style>
</block>
<block name="content" >
    <div class="detail-content">
        <!--<if condition="$plan['type'] != 1">-->
            <h2>{$plan.name}</h2>
        <!--</if>-->
        <div style="text-align:right">
            <span  style="display: inline-block;">
                <form method="post" action="<if condition='$type eq null'>{:U('Plan/allPlans')}<else/>{:U('Plan/attentionPlan')}</if>" id="form" style="display:inline-block">
                    <input type="hidden" name="dept" value="{$dept|default=''}"/>
                    <input type="hidden" name="cType" value="{$cType|default=''}"/>
                    <if condition="$type eq 'follow'">
                        <input type='hidden' name="is_follow" value="1" />
                    </if> 
                    <!--<a class="pointer goBack font-color1" style="margin-left:20px"><i class="w2" style="color:#2980C1">&#xe612;</i></a>-->
                    <a class="pointer goBack font-color1" style="">返回</a>
                </form>
            </span>
        </div>
        <div class="plan_details">
            <div class="write" align='right'>
                <if condition="$is_write eq 1">
                    <!--<if condition="$plan['sms_flag'] == 0">-->

                    <span><a href="{:U('schedule',array('id'=>$plan['plan_id'],'dept'=>$dept,'cType'=>$cType,'type'=>$type))}"><i class="w1">&#xe69b;</i>写进度</a></span><span class="line"> | </span>
                    <!--</if>-->
                </if>
                <span><a class="comment pointer" data-id="{$plan.plan_id}" data-dept="{$dept}" data-cType="{$cType}"><i class="w2">&#xe69b;</i>写批注</a></span>
                <!--                <span>
                                    <form method="post" action="<if condition='$type eq null'>{:U('Plan/allPlans')}<else/>{:U('Plan/attentionPlan')}</if>" id="form" style="display:inline-block">
                                        <input type="hidden" name="dept" value="{$dept|default=''}"/>
                                        <input type="hidden" name="cType" value="{$cType|default=''}"/>
                                        <if condition="$type eq 'follow'">
                                            <input type='hidden' name="is_follow" value="1" />
                                        </if> 
                                        <a class="pointer goBack font-color1" style="margin-left:20px"><i class="w2" style="color:#2980C1">&#xe612;</i></a>
                                    </form>
                                </span>-->
            </div>
            <p style='clear:both;'></p>
            <div class="peo_jd">
                <foreach name='sums' item='sum'>
                    <div class="xianshi cd-timeline-block">
                        <label>{$sum.user|getChineseName}</label> 
                        <div class="percent">
                            <if condition="$pro['process'] neq '0%'">
                                <span class="inner" style='width:{$sum.percent}'></span>
                            </if>
                        </div>
                        <span class="num">{$sum.percent|default='0%'}</span></div>
                </foreach> 
                <div class="xianshi">
                    <label>总进度</label> 
                    <div class="percent">
                        <span class="inner2" style='width:{$total}%'></span> 
                    </div>

                    <span class="num">{$total|default='0'}%</span></div>

            </div>
        </div>
        <if condition="$plan['detail'] neq null">
            <div class="plan_details">
                <div class="write">
                    <span class="n1">进度详情</span>
                    <if condition="$is_edit eq 1">
                        <span class="n2"><a href="{:U('showSchedule',array('id'=>$plan['plan_id'],'dept'=>$dept,'cType'=>$cType))}"><i class="w1">&#xe69b;</i>编辑</a></span>
                    </if>
                </div>
                <foreach name='plan.detail' item='detail'>
                    <div class="list_det cd-timeline-block">
                        <dl>
                            <dt class="det1 title_1"><img src="/Public/Index/img/icon_0.svg" />{$detail.write_time}</dt>
                            <if condition="$detail['type_flag'] eq 1">
                                <dd class="det1"><span>批注</span></dd>
                                <else />
                                <dd class="det1"><span>{$detail.percent}%</span></dd>
                            </if>
                        </dl>
                        <dl class="det3">
                            <dt class="name">{$detail.writer|getChineseName}</dt>
                        </dl>
                        <dl>
                            <dt class="det2">             
                                <span class="det_nr">{$detail.progress|htmlspecialchars_decode}</span>
                            </dt>
                        </dl>
                        <dl>
                            <dt class="det2">
                            <if condition="$detail['file'] neq 0">
                                <p class="attach pointer" style="line-height: 1em;color:#5077AA">显示附件</p>
                                <div class="attach_lists" style="border-bottom: 0.8px solid #efefef;display:none;margin:10px 0">
                                    <foreach name="detail.uploads" key="key" item="row">
                                        <if condition="$row['is_pic'] eq 0">
                                            <p style="border:0;line-height: 1em">
                                                <a href="{$row.upload}" download="{$row.name}">{$row.name}</a>
                                            </p>
                                            <else/>
                                            <div class="my-gallery" data-pswp-uid="1" style="display:inline-block">
                                                <figure style="margin:10px 4px 10px 0">
                                                    <a href="{$row.upload}" data-size="420x350">
                                                        <img class="image" src="{$row.upload}" width="50px" style="padding:0"/>
                                                    </a>
                                                </figure>
                                            </div>
                                        </if>
                                    </foreach>
                                </div>
                                <input type="hidden" id="ispc" value="{$ispc}">
                            </if>
                            </dt>
                        </dl>
                        <dl class="det4">
                            <if condition="$detail['location'] neq null">
                                <i class="address">&#xe61a;</i><span>{$detail.location}</span>
                            </if>

                        </dl>
                    </div>
                </foreach>
            </div>
        </if>
        <table class="plan-more">
            <if condition="$plan[type] neq 1">
                <tr>
                    <td class="key">计划级别</td>
                    <td class="value">{$plan['level'] == 1 ? '部门级' : '个人级'}</td>
                </tr>
            </if>
            <tr>
                <td class="key">计划内容</td>
                <td class="value">{$plan.content}</td>
            </tr>
            <if condition="$plan[type] neq 1">
                <tr>
                    <td class="key">起止时间</td>
                    <td class="value">{$plan.begin_date} 至 {$plan.end_date|default="无"}</td>
                </tr>
                <tr>
                    <td class="key">开放部门</td>
                    <td class="value">{$plan.to_id|getMoreDeptname}</td>
                </tr>
                <tr>
                    <td class="key">开放人员</td>
                    <td class="value">{$plan.to_person_id|getMoreUsername}</td>
                </tr>
                <tr>
                    <td class="key">负责人</td>
                    <td class="value">{$plan.manager|getMoreUsername}</td>
                </tr>
            </if>
            <tr>
                <td class="key">{$plan['type'] == 1 ? '执行人' : '参与人'}</td>
                <td class="value">{$plan.names}</td>
            </tr>
            <tr>
                <td class="key">创建人</td>
                <td class="value">{$plan.creator|getChineseName}</td>
            </tr>
            <tr>
                <td class="key">创建日期</td>
                <td class="value">{$plan.create_date}</td>
            </tr>
            <tr>
<!--                <td class="key">附件</td>
                <td class="value">
                    <foreach name="uploads" item="img" key="key">
                        <div class="my-gallery" data-pswp-uid="1">
                            <if condition="$img['is_pic'] eq 1">
                                <img class="image" id="img{$key+1}" src="{$img.url}" width="50px">
                                <else/>
                                <a href="{$img.url}" download="{$img.name}">{$img.name}</a>
                            </if>
                        </div>
                    </foreach>
                </td>-->
                <td class="key">标的物</td>
                <td class="value">
                    <foreach name="uploads" item="img" key="key">
                        <div class="my-gallery" data-pswp-uid="1">
                            <if condition="$img['is_pic'] eq 1">
                                <img class="image" id="img{$key+1}" src="{$img.url}" width="50px">
                                <else/>
                                <a href="{$img.url}" download="{$img.name}">{$img.name}<font color="red">({$plan.attach_type_name})</font</a>
                            </if>
                        </div>
                    </foreach>
                </td>
            </tr>
            <tr>
                <td class="key">状态</td>
                <td class="value">{$plan['sms_flag']?'<font color="red"><b>已结束</b></font>':'<font color="green"><b>进行中</b></font>'}</td>
            </tr>
        </table>
        <if condition="$plan['comment'] neq null">
            <h3>领导批注</h3>
            <table>
                <tr>
                    <td class="key">领导</td>
                    <td class="key">批注内容</td>
                    <td class="key">批注时间</td>
                </tr>
                <foreach name='plan.comment' item='comment'>
                    <tr>
                        <td>{$comment.writer|getChineseName}</td>
                        <td>{$comment.progress}</td>
                        <td>{$comment.write_time}</td>
                    </tr>
                </foreach>
            </table>
        </if>
    </div>
    <!-- 点击单独显示图片，手势放大、缩小  开始 -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

        <!-- Background of PhotoSwipe. 
             It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>

        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
            <!-- Container that holds slides. 
                PhotoSwipe keeps only 3 of them in the DOM to save memory.
                Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <!--  Controls are self-explanatory. Order can be changed. -->
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div> 
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 点击单独显示图片，手势放大、缩小  结束-->
</block>
<block name="script">
    <script type="text/javascript" src="/Public/Index/js/form.js"></script>
    <script type="text/javascript" src="/Public/Index/js/plan.js"></script>
    <script type="text/javascript" src="/Public/static/exif.js"></script>
    <script type="text/javascript">
//        $(initFlowStep())
        $(initSchedule())
        //显示附件
        $('.cd-timeline-block').on('click', '.attach', function (e) {
            _this = $(this);
            $(this).next().slideDown();

            $(document).on('click', function () {
                $(_this).next().slideUp();
            })
            e.stopPropagation();
        })

        $('.attach_lists').on('click', function (e) {
            e.stopPropagation();
        })


        $('.goBack').click(function () {
            var type = $('input[name=type]').val();
            if ($('input[name=cType]').val() != '') {
                $('#form').submit();    //当前计划
            } else {
                location.href = '/index.php/Index/Plan/lists/type/' + type;   //进行中、已完成
            }
        })
    </script>
    <!-- 点击单独显示图片，手势放大、缩小js-->
    <script type="text/javascript">
        window.onload = function () {
            getExif();
        };

        function getExif() {
            var tags = document.getElementsByClassName('image');
            var ispc = $('#ispc').val();

            for (var i = 0; i < tags.length; i++) {
                var id = tags[i].getAttribute('id');
                if (ispc == 1) {
                    var imgs = new Image();
                    imgs.src = $('#' + id).attr("src");
                    var w = $('#' + id).width();
                    var h = $('#' + id).height();
                    if (w > h) {
                        $('#' + id).parent('a').attr("data-size", w + "x" + h);
                    } else {
                        var percent = w / h;
                        var nw = w + 100;
                        var nh = parseInt(nw / percent);
                        $('#' + id).parent('a').attr("data-size", nw + "x" + nh);
                    }
                } else {
                    EXIF.getData(tags[i], function () {
                        var make = EXIF.getTag(this, "Make");
                        var model = EXIF.getTag(this, "Model");
                        var orientation = EXIF.getTag(this, "Orientation");
                        //alert(orientation);
                        var u = navigator.userAgent;
                        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                        isiOS = isiOS == true ? 1 : 0;

                        var imgs = new Image();
                        imgs.src = $('#' + id).attr("src");
                        var w = $('#' + id).width();
                        var h = $('#' + id).height();
                        if (isiOS == 1 && orientation == 6) {
                            var percent = w / h;
                            var nw = w + 100;
                            var nh = parseInt(nw / percent);
                            $('#' + id).parent('a').attr("data-size", nw + "x" + nh);
                        } else if (isiOS == 0 && orientation == 6) {
                            $('#' + id).css({'transform': 'rotate(90deg)'});
                            $('#' + id).parent('a').attr("data-size", w + "x" + h);
                        }
                    });
                }
            }
        }




        var initPhotoSwipeFromDOM = function (gallerySelector) {

            // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
            // (children of gallerySelector)
            var parseThumbnailElements = function (el) {
                var thumbElements = el.childNodes,
                        numNodes = thumbElements.length,
                        items = [],
                        figureEl,
                        linkEl,
                        size,
                        item;

                for (var i = 0; i < numNodes; i++) {

                    figureEl = thumbElements[i]; // <figure> element

                    // 仅包括元素节点
                    if (figureEl.nodeType !== 1) {
                        continue;
                    }
                    linkEl = figureEl.children[0]; // <a> element

                    size = linkEl.getAttribute('data-size').split('x');

                    // 创建幻灯片对象
                    item = {
                        src: linkEl.getAttribute('href'),
                        w: parseInt(size[0], 10),
                        h: parseInt(size[1], 10)
                    };



                    if (figureEl.children.length > 1) {
                        // <figcaption> content
                        item.title = figureEl.children[1].innerHTML;
                    }

                    if (linkEl.children.length > 0) {
                        // <img> 缩略图节点, 检索缩略图网址
                        item.msrc = linkEl.children[0].getAttribute('src');
                    }

                    item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
                    items.push(item);
                }

                return items;
            };

            // 查找最近的父节点
            var closest = function closest(el, fn) {
                return el && (fn(el) ? el : closest(el.parentNode, fn));
            };

            // 当用户点击缩略图触发
            var onThumbnailsClick = function (e) {
                e = e || window.event;
                e.preventDefault ? e.preventDefault() : e.returnValue = false;

                var eTarget = e.target || e.srcElement;

                // find root element of slide
                var clickedListItem = closest(eTarget, function (el) {
                    return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                });

                if (!clickedListItem) {
                    return;
                }

                // find index of clicked item by looping through all child nodes
                // alternatively, you may define index via data- attribute
                var clickedGallery = clickedListItem.parentNode,
                        childNodes = clickedListItem.parentNode.childNodes,
                        numChildNodes = childNodes.length,
                        nodeIndex = 0,
                        index;

                for (var i = 0; i < numChildNodes; i++) {
                    if (childNodes[i].nodeType !== 1) {
                        continue;
                    }

                    if (childNodes[i] === clickedListItem) {
                        index = nodeIndex;
                        break;
                    }
                    nodeIndex++;
                }

                if (index >= 0) {
                    // open PhotoSwipe if valid index found
                    openPhotoSwipe(index, clickedGallery);
                }
                return false;
            };

            // parse picture index and gallery index from URL (#&pid=1&gid=2)
            var photoswipeParseHash = function () {
                var hash = window.location.hash.substring(1),
                        params = {};

                if (hash.length < 5) {
                    return params;
                }

                var vars = hash.split('&');
                for (var i = 0; i < vars.length; i++) {
                    if (!vars[i]) {
                        continue;
                    }
                    var pair = vars[i].split('=');
                    if (pair.length < 2) {
                        continue;
                    }
                    params[pair[0]] = pair[1];
                }

                if (params.gid) {
                    params.gid = parseInt(params.gid, 10);
                }

                return params;
            };

            var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
                var pswpElement = document.querySelectorAll('.pswp')[0],
                        gallery,
                        options,
                        items;

                items = parseThumbnailElements(galleryElement);

                // 这里可以定义参数
                options = {
                    barsSize: {
                        top: 100,
                        bottom: 100
                    },
                    fullscreenEl: false, // 是否支持全屏按钮
//                    shareButtons: [
//                        {id: 'wechat', label: '分享微信', url: '#'},
//                        {id: 'weibo', label: '新浪微博', url: '#'},
//                        {id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true}
//                    ], // 分享按钮

                    // define gallery index (for URL)
                    galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                    getThumbBoundsFn: function (index) {
                        // See Options -> getThumbBoundsFn section of documentation for more info
                        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                                rect = thumbnail.getBoundingClientRect();

                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                    }

                };

                // PhotoSwipe opened from URL
                if (fromURL) {
                    if (options.galleryPIDs) {
                        // parse real index when custom PIDs are used 
                        for (var j = 0; j < items.length; j++) {
                            if (items[j].pid == index) {
                                options.index = j;
                                break;
                            }
                        }
                    } else {
                        // in URL indexes start from 1
                        options.index = parseInt(index, 10) - 1;
                    }
                } else {
                    options.index = parseInt(index, 10);
                }

                // exit if index not found
                if (isNaN(options.index)) {
                    return;
                }

                if (disableAnimation) {
                    options.showAnimationDuration = 0;
                }

                // Pass data to PhotoSwipe and initialize it
                gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
            };

            // loop through all gallery elements and bind events
            var galleryElements = document.querySelectorAll(gallerySelector);

            for (var i = 0, l = galleryElements.length; i < l; i++) {
                galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                galleryElements[i].onclick = onThumbnailsClick;
            }

            // Parse URL and open gallery if it contains #&pid=3&gid=1
            var hashData = photoswipeParseHash();
            if (hashData.pid && hashData.gid) {
                openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
            }
        };

        // execute above function
        initPhotoSwipeFromDOM('.my-gallery');
    </script>
</block>
